<template>
  <div>
    <el-submenu
      v-if="menu.children && menu.children.length > 0"
      :index="'m' + menu.menuId">
      <template slot="title">
        <svg-icon :icon-class="menu.icon" class="blog-icon" />
        <span slot="title">{{ menu.name }}</span>
      </template>
      <!-- 递归调用 -->
      <admin-sidebar-item v-if="subMenu.display === 0"
                          v-for="subMenu in menu.children"
                          :key="subMenu.menuId"
                          :menu="subMenu" />
    </el-submenu>
    <el-menu-item v-else-if="menu.display === 0" :index="'/' + menu.path" @click="routeHandle(menu)">
      <svg-icon :icon-class="menu.icon" class="blog-icon" />
      <span slot="title">{{ menu.name }}</span>
    </el-menu-item>
  </div>
</template>

<script>
  export default {
    name: "admin-sidebar-item",
    props: {
      menu: {
        type: Object,
        required: true
      },
    },
    methods: {
      routeHandle(menu) {
        // console.log('菜单: ', menu)
        let obj = {
          // 菜单id
          menuId: menu.menuId,
          // 菜单路由
          path: "/" + menu.path,
          // 菜单名字标题
          title: menu.name,
          // 参数1
          params: {},
          // 参数2
          query: {}
        }
        // 添加一个菜单tab
        this.$store.commit('menu/addMenuTabOnMiss', obj)
        // 路由跳转
        this.$router.push('/' + menu.path)
      }
    }
  }
</script>

<style scoped>

</style>
